import { RouteConfig } from 'react-router-config'
import React from 'react'
import Loadable from 'react-loadable'
import { Loading } from '../components/Loading'

function loadComponent (path: string): React.ComponentType {
    return Loadable(
        {
            loading: Loading,
            loader: () => import(`../pages/${path}`),
            delay: 300
        }
    )
}

export const routes: RouteConfig[] = [
    {
        path: '/login',
        exact: true,
        component: loadComponent('login')
    },
    {
        path: '/test',
        exact: true,
        component: loadComponent('navPages/ExperiencePage')
    },
    {
        path: '',
        component: loadComponent('navPages'),
        routes: [
            {
                // 内部有两个 Route JSX 路由
                path: '/explore',
                component: loadComponent('navPages/explore')
            },
            {
                path: '/announce',
                exact: true,
                component: loadComponent('navPages/project')
            },
            {
                path: '/community',
                exact: true,
                component: loadComponent('navPages/community')
            },
            {
                path: '/race/:raceId',
                component: loadComponent('navPages/detailPage/RaceDetailPage'),
                routes: [
                    {
                        path: '/race/:raceId/announce',
                        component: loadComponent('navPages/detailPage/RaceDetailPage/RaceDetailPageAnnounce')
                    },
                    {
                        path: '/race/:raceId/social',
                        component: loadComponent('navPages/detailPage/BaseDetailPage/BaseCommentPage')
                    },
                    {
                        path: '/race/:raceId/',
                        exact: true,
                        component: loadComponent('navPages/detailPage/RaceDetailPage/RaceDetailPageInfo')
                    }
                ]
            },
            {
                path: '/sign/:signId',
                component: loadComponent('navPages/signPage')
            }
        ]
    }
]
